import React from 'react'
import Block from 'fs-flex'
import { Toast, Card, Button, Modal, WingBlank, WhiteSpace } from 'antd-mobile';

import qs from 'qs'
import CmsService from '../../../../services/CmsService'
import Constant from '../../../../utils/constant';
import Header from '../../../../components/Header/index';
const alert = Modal.alert;


class ContentList extends React.Component{
    state={
        data:[]
    }
    async componentDidMount(){
        this.query()
    }

    query=async()=>{
        const {code,data}=await CmsService.list()
        if (Constant.responseOK === code) {
            this.setState({ data: data })
        }
    }

    edit(id){
        this.props.history.push(`/manage/cms/edit?id=${id}`)
    }
    newRecord(){
        this.props.history.push(`/manage/cms/edit`)
    }

    detail(id){
        this.props.history.push(`/manage/cms/detail?id=${id}`)
    }

    async deleteAsync(id){
        const {code,data}=await CmsService.delete(id)
        if (Constant.responseOK === code) {
            this.query()
        }
    }

    delete=async(id)=>{
        alert('删除', `删除后不能恢复，确定删除吗？`, [
            { text: '再想想', onPress: () => console.log('cancel'), style: 'default' },
            {
                text: '确定', onPress: () => {
                    this.deleteAsync(id)
                }
            },
        ]);
    }
    
    render() {
        const data=this.state.data
        const html=data&& data.articleContent?data.articleContent:'<div>暂无内容</div>'
        return(
            <Block vf>
                <Block>
                    <Header needBack={true} history={this.props.history} title='操作说明列表' />
                </Block>
                <WingBlank size="lg">
                    <WhiteSpace size="lg" />
                    {this.state.data && this.state.data.length > 0 ? this.state.data.map((data, idx) => (
                        <Card key={idx}>
                            <Card.Body>
                                <Block vf>
                                    <Block>{data.articleTitle}</Block>
                                    <Block mt={10} wf>
                                        <Block>
                                            <Button type="primary" size="small" onClick={this.edit.bind(this,data.id)} inline>编辑</Button>
                                        </Block>
                                        <Block ml={5}>
                                            <Button type="primary" size="small" onClick={this.delete.bind(this,data.id)} inline>删除</Button>
                                        </Block>
                                        <Block ml={5}>
                                            <Button type="primary" size="small" onClick={this.detail.bind(this,data.id)} inline>详细</Button>
                                        </Block>
                                    </Block>
                                </Block>
                            </Card.Body>
                        </Card>
                    )) : null}
                    <Block wf mt={15}>
                        <Block f='3'></Block>
                        <Block f='4'><Button a='c' f='c' size='small' type="primary" onClick={this.newRecord.bind(this)}>新建</Button></Block>
                        <Block f='3'></Block>
                    </Block>
                    <WhiteSpace size="lg" />
                </WingBlank>
            </Block>
        )
    }
    
}
export default ContentList;